// 提供复用的逻辑函数
import { useIntersectionObserver } from "@vueuse/core"
import { ref } from 'vue'
/**
 * 数据懒加载
 * @param {ELement} traget - DOM对象
 * @param {Function} apiFn - API函数
 */
export const useLazyData = (apiFn) => {
  // 定义数据
  const LazyData = ref([])
  // 定义目标元素
  const target = ref(null)
  // stop 停止观察
  const { stop } = useIntersectionObserver(
    // 监听的目标元素
    target,
    ([{ isIntersecting }], observerElement) => {
      // isIntersecting 是否进入可视区
      if (isIntersecting) {
        // console.log('进入可视区');
        // 停止观察
        stop()
        // 调用api获取数据
        apiFn().then(data => {
          LazyData.value = data.result
          // console.log(data.result);
        })
      }
    },
    // 配置选项
    // 只要可视区与懒加载区相交，则立即触发懒加载
    { threshold: 0 }
  )
  return { LazyData, target }
}
